<template>

  
    <div>  
        <a-card :bordered="false">
            <a-card-grid class="cardCount">
                <a-row>
                    <a-col :span="20">
                        <div class="count-title">终端总数</div>
                        <div class="count-val">{{count.totalCount}}</div>
                    </a-col>
                    <a-col :span="4">
                        <img class="count-img" src="../img/xinpian.png"/>
                    </a-col>
                </a-row>
            </a-card-grid>

            <a-card-grid class="cardCount">
                <a-row>
                    <a-col :span="20">
                        <div class="count-title">在线终端数</div>
                        <div class="count-val">{{count.onLineCount}}</div>
                    </a-col>
                    <a-col :span="4">
                        <img class="count-img" src="../img/xinhao.png"/>
                    </a-col>
                </a-row>
            </a-card-grid>

            <a-card-grid class="cardCount">
                <a-row>
                    <a-col :span="20">
                        <div class="count-title">离线终端数</div>
                        <div class="count-val">{{count.offLineCount}}</div>
                    </a-col>
                    <a-col :span="4">
                        <img class="count-img" src="../img/lixian2.png"/>
                    </a-col>
                </a-row>
            </a-card-grid>

            <!-- <a-card-grid class="cardCount">
                <a-row>
                    <a-col :span="20">
                        <div class="count-title">故障设备数</div>
                        <div class="count-val">{{count.faultCount}}</div>
                    </a-col>
                    <a-col :span="4">
                        <img class="count-img" src="../img/guzhang.png"/>
                    </a-col>
                </a-row>
            </a-card-grid> -->

            <a-card-grid class="cardCount">
                <a-row>
                    <a-col :span="20">
                        <div class="count-title">温湿度报警数</div>
                        <div class="count-val">{{count.alarmThCount}}</div>
                    </a-col>
                    <a-col :span="4">
                        <img class="count-img" src="../img/baojing.png"/>
                    </a-col>
                </a-row>
            </a-card-grid>

            <a-card-grid class="cardCount">
                <a-row>
                    <a-col :span="20">
                        <div class="count-title">趋势报警数</div>
                        <div class="count-val">{{count.alarmTrendCount}}</div>
                    </a-col>
                    <a-col :span="4">
                        <img class="count-img" src="../img/qushi.png"/>
                    </a-col>
                </a-row>
            </a-card-grid>

            <a-card-grid class="cardCount">
                <a-row>
                    <a-col :span="20">
                        <div class="count-title">烟感报警数</div>
                        <div class="count-val">{{count.alarmSmokeCount}}</div>
                    </a-col>
                    <a-col :span="4">
                        <img class="count-img" src="../img/yanhuo.png"/>
                    </a-col>
                </a-row>
            </a-card-grid>
        </a-card>

        <List ref="stateViewList" axiosUrl="/ThEqStateController/viewList" 
            :dictCodes="defaultSettings.数据字典.区域+','+defaultSettings.数据字典.配电室" :showPagination="false"
            :initQuery="initQuery" :initOrder="initOrder" :isAutoLoad="false" >
            <template slot="listItem" slot-scope="state">
               
                <a-card :bordered="false">
                    <a-card-grid class="cardGrid"  v-for="(item,index) in  state.list" :key="index" @click="showTrend(item)" style="cursor: pointer;">

                        <a-row>
                            <span style="font-weight: 500;font-size:13px">
                               
                                {{dictText(defaultSettings.数据字典.区域,item.deviceRegion)}}
                                <br/>
                                {{item.deviceName.substring(0,item.deviceName.lastIndexOf('-'))}}
                            </span>
                        </a-row>
                        <a-row>
                            <a-col :span="10">
                                <img src="../img/thcgq.png" style="width:50px"/>
                            </a-col>
                            <a-col :span="14">
                                <a-row style="margin-top:8px;">
                                    <img src="../img/wendu.png" style="width:20px;" />
                                    <span style="font-weight: 500;padding-left:10px;">{{item.deviceTemperature}}°C</span>
                                </a-row>

                                <a-row>
                                    <img src="../img/shidu.png" style="width:20px;" />
                                    <span style="font-weight: 500;padding-left:10px;">{{item.deviceHumidity}}%</span>
                                </a-row>
                            </a-col>
                        </a-row>
                        <a-row>
                            <span v-if="item.lineState===defaultSettings.常量.是">
                                <img src="../img/zaxian.png" style="width:20px"/>
                                <span style="font-weight: 500;padding-left:2px;">在线</span>
                            </span>
                            <span v-else>
                                <img src="../img/lixian.png" style="width:20px"/>
                                <span style="font-weight: 500;padding-left:2px;">离线</span>
                            </span>
                           
                           <!-- style="cursor:pointer;" -->
                            <span >
                                <img v-if="item.alarmState===defaultSettings.常量.是" src="../img/baojing.png" style="width:30px;padding-left:10px;margin-top:-6px;"/>
                            </span>                           
                        </a-row>

                        <a-row>
                            <div style="display:flex;align-items: center;">
                                <img src="../img/bianhao.png" style="width:15px">
                                <span style="height:15px;line-height:15px;margin-left:6px;color:#707070">{{item.deviceNo}}</span>
                            </div>

                            <div style="display:flex;align-items: center;margin-top:6px">
                                <img src="../img/shijian.png" style="width:15px">
                                <span style="height:15px;line-height:15px;margin-left:6px;color:#707070">{{item.reportTime}}</span>
                            </div>
                        </a-row>



                    </a-card-grid>
                    
                </a-card>
            </template>
       
        </List>

        <ExtModal ref="ExtModal"></ExtModal>
     
    </div>
    

    
</template>

<script>
import request from '@/utils/request'
import List from '@/components/lt/Llist'
import {SysMixin} from '@/mixins/SysMixin'
import defaultSettings from "@/config/defaultSettings"
import ExtModal from '@/views/system/codeGenerator/ExtModal'
export default {
    name:'Workplace',
    components: {List,ExtModal},
    mixins:[SysMixin],
    data(){
        return{
            initDictCodes:defaultSettings.数据字典.区域+','+defaultSettings.数据字典.配电室+','+defaultSettings.数据字典.是否,
            defaultSettings,
            initQuery:[{field:'deviceType',val:'1'}],
            initOrder:[{field:'b.device_order',val:'asc'}],
            timmer:null,
            interval:1000*60*5,
            count:{
                totalCount:0, //设备总数
                onLineCount:0, //在线数
                offLineCount:0,  //离线数
                faultCount:0,//故障数量
                smokeCount:0,//烟感设备数量
                thCount:0,//温湿度设备数量
                alarmThCount:0,//温湿度报警数量
                alarmTrendCount:0,//温湿度趋势报警数量
                alarmSmokeCount:0,//烟感报警数量

            }
        }
    },
    mounted(){
        this.$nextTick(() => {
            this.query()
        })
    },
    methods:{
       query(){
        this.$refs['stateViewList'].searchQuery()

        //查询统计数据
        this.queryCount()
        if(this.timmer){
            clearTimeout(this.timmer)
        }
        this.timmer = setTimeout(() => {
            this.query()
        }, this.interval)
       },
       queryCount(){
            request.get('/ThReportController/queryEqAndAlarmCount',{params:{}}).then((res)=>{
                if (res.success) {
                    this.count = res["result"]
                } else {
                    this.$message.warning(res.message);
                }
            })
       },
        showTrend(item){
        this.sysPageOpen('1919964789616095233',item,'ExtModal',item.deviceName);
       }
    },
    created(){
      
    },
    
}
</script>

<style scoped lang="less">

   .cardGrid{
        margin: 4px;
        border-radius: 10px;
        max-width: 13vw;
        height: 190px;
        padding: 10px;
   }

   .cardCount{
        margin: 4px;
        border-radius: 10px;
        max-width: 13vw;
        padding: 10px;
   }
   .count-title{
    font-size: 16px;
    color: #707070;
   }

   .count-val{
    font-size: 24px;
    font-weight: 700;
   }

   .count-img{
    width: 30px;
   }

</style>